<template>
  <div class="v-input" :disabled="isDisabled" ref="input">
    <div class="before">
      <slot name="before"/>
    </div>
    <div class="content" :class="{empty:isDisabled||!value}">
      <input :type="type" :placeholder="placeholder" :maxlength="maxLength" :value="value" @input="change" @focus="focus" :disabled="isDisabled" ref="content"/>
      <div class="clear" @touchstart="isDisabled||$emit('input', '')">
        <v-icon type="clear" />
      </div>
    </div>
    <div class="after">
      <slot name="after"/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ""
    },
    type: null,
    placeholder: null,
    maxLength: null,
    disabled: {
      default: false
    }
  },
  computed: {
    isDisabled() {
      return this.disabled !== false;
    }
  },
  methods: {
    change(e) {
      this.$emit("input", e.target.value);
      this.$emit("change", e);
    },
    focus(e) {
      "select-all" in this.$attrs && this.$refs.content.select();
      e && this.$emit("focus", e);
    }
  },
  created() {}
};
</script>

<style lang="less">
.v-input {
  height: 50px;
  margin: 15px;
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  align-items: center;
  border: 1px solid #d7d7d7;

  > .before {
    padding: 0px 10px;
    height: min-content;
    white-space: nowrap;
    border-right: 1px solid #d7d7d7;
  }
  > .after {
    padding: 0px 10px;
    height: min-content;
    white-space: nowrap;
    border-left: 1px solid #d7d7d7;
  }
  > .before:empty,
  > .after:empty {
    display: none;
  }

  > .content {
    flex: 1;
    display: flex;
    position: relative;
    > input {
      flex: 1;
      width: 100%;
      border: none;
      font: inherit;
      outline: none;
      padding: 0px 10px;
      &:disabled {
        background-color: transparent;
      }
      &::placeholder {
        color: #cccccc;
      }
    }
    > .clear {
      top: 0px;
      right: 0px;
      height: 100%;
      display: none;
      font-size: 20px;
      color: #999999;
      padding: 0px 5px;
      position: absolute;
      > i {
        align-self: center;
      }
    }
  }

  &[clearable] {
    > .content {
      &:not(.empty) {
        > input:focus {
          padding-right: 25px;
          + .clear {
            display: flex;
          }
        }
      }
    }
  }

  &[disabled] {
    background-color: #eeeeee;
  }
}
</style>


